<!--  -->
<script setup>import { ref, computed, onMounted ,reactive} from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/index.js'
import storeListItem from "@/components/store/storeListItem.vue";
import api from "@/api/api";
import {formatTime} from "@/utils/common.js";

// 引入图片资源
import kefuIcon from '@/assets/vip/kefu.png'
import vip2Icon from '@/assets/vip/vip_2.png'
import cjbtnIcon from "@/assets/vip/cjbtn.png"
import hasGiftIcon from "@/assets/vip/has-gift.png"

// 响应式数据
const myLuckyRef = ref(null)
const show = ref(false)
const showResult = ref(false)
const list = ref([])
const finished = ref(false)
const vipInfo = ref({})
const pageInfo = reactive({
  pageNum: 1,
  pageSize: 4,
})

const vip_label = [
  "免费洗车",
  "工时8折",
  "每月抽奖",
  "5折钢圈修复",
  "免费 24 项检测",
  "免费加玻璃水",
  "8折补胎",
  "免费刹车油保养",
  "8折美容",
  "全合成机油保养",
]

const blocks = [{ padding: 0, background: "transparent" }]
const prizes = [
  {
    background: "#feebca",
    fonts: [
      {
        text: "谢谢参与",
        lengthLimit: "50%",
        fontColor: "#c5241a",
        fontWeight: "600",
        top: "0.3rem",
      },
    ],
  },
  {
    background: "#feebca",
    fonts: [
      {
        text: "品牌雨刮片 免费更换1次",
        lengthLimit: "50%",
        fontColor: "#c5241a",
        fontWeight: "600",
        top: "0.3rem",
      },
    ],
  },
  {
    background: "#feebca",
    fonts: [
      {
        text: "品牌空气滤芯免 费更换1次",
        lengthLimit: "50%",
        fontColor: "#c5241a",
        fontWeight: "600",
        top: "0.3rem",
      },
    ],
  },
  {
    background: "#feebca",
    fonts: [
      {
        text: "全合成机油 免费保养十年",
        lengthLimit: "50%",
        fontColor: "#c5241a",
        fontWeight: "600",
        top: "0.3rem",
      },
    ],
  },
]

const defaultConfig = {
  gutter: "0.1rem",
}

const buttons = [
  {
    radius: "2.2rem",
    imgs: [
      {
        src: cjbtnIcon,
        width: "2.2rem",
        height: "2.85rem",
        top: "-1.8rem",
      },
    ],
  },
]

// 路由和状态管理
const router = useRouter()
const store = useUserStore()

// 计算属性
const userData = computed(() => store.userData)

const width = computed(() => {
  return (
      Math.max(document.documentElement.clientWidth, window.innerWidth || 0) *
      0.9
  );
})
const vip_time = computed(() => {
  return formatTime(userData.value.vip_end, "yyyy年MM月dd日");
})


// 获取VIP图标
const getVipIcon = (index) => {
  return new URL(`../assets/vip/${index}.png`, import.meta.url).href
}

// 方法定义
const jump = () => {
  router.push({
    path: "/allVipUse",
  })
}

const goChat = () => {
  router.push({
    path: "/customer",
  })
}

const goOrder = () => {
  router.push({
    path: "/confirmVipOrder",
    query: {
      goodsId: vipInfo.value.goodsId,
      num: 1,
      skuId: vipInfo.value.id,
    },
  })
}

const showRoule = () => {
  show.value = true
}

const getStoreList = async () => {
  try {
    const res = await api.store.getStoreList(pageInfo.value)
    if (res.length == 0) finished.value = true
    list.value = [...list.value, ...res].filter((v, i) => i < 4)
  } catch (error) {
    console.error(error)
  }
}

const getVipInfo = async () => {
  try {
    const res = await api.goods.getGoodsinfo({
      goodsId: "1952191044194463746",
    })
    vipInfo.value = res.goodsSkuShowVo
  } catch (error) {
    console.error('获取会员信息失败:', error);
  }
}

const startCallback = () => {
  myLuckyRef.value.play();
  setTimeout(() => {
    const index = 0;
    myLuckyRef.value.stop(index);
  }, 4000);
}

const endCallback = (prize) => {
  console.log("抽奖结果: ", prize);
  showResult.value = true;
}

// 生命周期钩子
onMounted(() => {
  if (!userData.value.isVip) {
    getStoreList();
  } else {
    myLuckyRef.value.init();
  }
  getVipInfo();
})
</script>
<template>
  <div class="home">
    <van-nav-bar title="安心修大会员" fixed class="nav_bar" safe-area-inset-top>
      <template #right>
        <div class="btns">
          <van-image
              class="btn_1"
              :src="kefuIcon"
              @click="goChat"
          />
        </div>
      </template>
    </van-nav-bar>
    <div class="vip_type">
      <van-swipe :loop="false" :width="width" :show-indicators="false">
        <van-swipe-item v-for="item in 1" :key="item">
          <template v-if="!userData.isVip">
            <div class="vip_item">
              <div class="top">
                <div class="vip_name">{{ vipInfo.goodsName }}</div>
                <div class="rule" @click="showRoule">规则</div>
              </div>
              <div class="discount">
                <van-image
                    class="icon"
                    :src="vip2Icon"
                />
                <span class="text_2">
                <span>尊享</span>
                <span class="num_2">10大权益</span></span
                >
              </div>
              <div class="price">
                <div class="text_3">¥</div>
                <div class="price_num">{{ vipInfo.price }}</div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="vip_item isVip">
              <div class="top">
                <div class="user_info">
                  <div class="avatar">
                    <van-image
                        round
                        width="1.34rem"
                        height="1.34rem"
                        :src="userData.avatar"
                    />
                    <div class="vip_tag">
                      <van-image
                          round
                          width="0.26rem"
                          height="0.26rem"
                          :src="vip2Icon"
                      />
                      <div style="margin-left: 0.1rem">vip</div>
                    </div>
                  </div>
                  <div class="user_name">{{ userData.userName }}</div>
                </div>
                <div class="rule" @click="showRoule">规则</div>
              </div>
              <div class="vip_time">{{ vip_time }}到期</div>
            </div>
          </template>
        </van-swipe-item>
      </van-swipe>
      <div v-if="!userData.isVip" class="mask"></div>
    </div>
    <div class="vip_power">
      <div class="power_title">尊享会员权益</div>
      <div class="power_icon">
        <div
            v-for="(item, index) in vip_label"
            :key="index"
            class="power_icon_item"
        >
          <div class="pic">
            <van-image
                class="pic_icon"
                :src="getVipIcon(index)"
            />
          </div>
          <span class="label">{{ item }}</span>
        </div>
      </div>
    </div>
    <div v-if="!userData.isVip" class="store">
      <div class="top">
        <div class="label">适用门店</div>
        <div class="all" @click="jump">全部></div>
      </div>
      <div class="list">
        <storeListItem
            v-for="(v, i) in list"
            :key="i"
            :item="v"
        ></storeListItem>
      </div>
    </div>
    <div class="vip_power choujiang">
      <div class="power_title t2">安心修会员大抽奖</div>
      <div class="choujiang_box">
        <div class="wheel_content">
          <LuckyWheel
              ref="myLuckyRef"
              width="6.9rem"
              height="6.9rem"
              :blocks="blocks"
              :prizes="prizes"
              :buttons="buttons"
              :default-config="defaultConfig"
              @start="startCallback"
              @end="endCallback"
          ></LuckyWheel>
        </div>
      </div>
      <div class="roules">
        <div class="roules_title">抽奖规则：</div>
        <p class="first_p">
          1. 用户购买安心修会员后，获得参与会员抽奖活动的资格;
        </p>
        <p>
          2.
          在会员有效期内，每月8号可参与抽奖活动1次，抽奖礼品以抽奖页面内容为准，使用规则以各券面使用规则为准；
        </p>
        <p>
          3.
          抽中的奖品将以优惠券的形式发放到您的券包里，可通过安心修-我的-我的券包查看，使用需到安心修指定门店处核销使用；
        </p>
        <p>4. 奖品的有效期为抽中次日到会员到期日。</p>
      </div>
    </div>
    <div v-if="!userData.isVip" class="bottom">
      <div class="btn_outside">
        <div class="btn_inside">
          <div class="left">
            <span class="text_1">￥</span>
            <span class="text_2">{{ vipInfo.price }}</span>
            <span class="text_1">/年</span>
          </div>
          <div class="right" @click="goOrder">
            <div class="text_3">立即开通></div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model:show="show" position="bottom" round>
      <div class="rules_content">
        <span class="close" @click="show = false">
          <van-icon name="cross" size="20" color="#000" />
        </span>
        <div class="rules_imgs">
          <img
              src="https://zxcxappimg.cxbtv.cn/qinghai/2025/07/31/0d0b6b7160cf2678eb7a0dfab313a367.jpg"
              alt=""
          />
          <img
              src="https://zxcxappimg.cxbtv.cn/qinghai/2025/07/31/d32b1d2186649aaeaf7429c69232f415.jpg"
              alt=""
          />
          <img
              src="https://zxcxappimg.cxbtv.cn/qinghai/2025/07/31/67e6a41fe0e418759bde2eb95f26aafd.jpg"
              alt=""
          />
          <img
              src="https://zxcxappimg.cxbtv.cn/qinghai/2025/07/31/2e44d67294e41026c0e2ce71f7aacd72.jpg"
              alt=""
          />
          <img
              src="https://zxcxappimg.cxbtv.cn/qinghai/2025/07/31/a6e0495ac05a07746f2dd6a08fd89e4f.jpg"
              alt=""
          />
        </div>
      </div>
    </van-popup>
    <van-dialog
        v-model="showResult"
        :show-cancel-button="false"
        :show-confirm-button="false"
    >
      <div class="pic" @click="showResult = false">
        <img :src="hasGiftIcon" />
        <div class="gift_result">
          <p>恭喜你</p>
          <p>抽到品牌空气滤芯免费更换1次</p>
        </div>
      </div>
    </van-dialog>
  </div>
</template>



<style lang="less" scoped>
.home {
  min-height: 100vh;
  background: url("https://zxcxappimg.cxbtv.cn/qinghai/2025/04/25/da9e8a0e35e424fa5ea73657b9b08d0e.png")
  no-repeat;
  background-attachment: scroll;
  background-size: cover;
  background-position: top center;
  padding: 150px 60px 360px 60px;
  .nav_bar {
    background: url("https://zxcxappimg.cxbtv.cn/qinghai/2025/04/25/da9e8a0e35e424fa5ea73657b9b08d0e.png")
    no-repeat;
    background-attachment: local;
    background-size: cover;
    background-position: center;
    :deep(.van-nav-bar__title) {
      color: #fff;
    }
    .btns {
      display: flex;
      align-items: center;
      .btn_1 {
        width: 62px;
        height: 62px;
        margin: 0 35px 0 0;
      }
      .btn_2 {
        width: 62px;
        height: 62px;
      }
    }
  }
  :deep(.van-hairline--bottom::after) {
    border: unset;
  }
  .vip_type {
    margin-top: 50px;
    position: relative;
    .vip_item {
      width: 100%;
      height: 565px;
      background: url("https://zxcxappimg.cxbtv.cn/qinghai/2025/07/30/dba3ea5e68d65a5be47ec4d5bb1f2ebf.png")
      no-repeat;
      background-size: 100% 100%;
      background-position: center;
      border-radius: 20px;
      padding: 70px;
      .top {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        .vip_name {
          font-size: 84px;
          color: #53290b;
          font-weight: bold;
          letter-spacing: 10px;
          font-family: yixindianfenghei;
        }
        .rule {
          font-size: 37px;
          color: #53290b;
        }
      }
      .text_1 {
        padding: 0 0 20px 0;
        font-size: 42px;
        span {
          font-size: 50px;
          color: #53290b;
        }
      }
      .discount {
        padding: 10px 40px;
        background: #eabe97;
        border-radius: 999px;
        display: flex;
        align-items: center;
        max-width: 500px;
        margin-top: 25px;
        // justify-content: space-between;
        .icon {
          width: 49px;
          height: 49px;
          margin-right: 15px;
        }
        .text_2 {
          font-size: 32px;
          color: #53290b;
          display: flex;
          align-items: baseline;
          .num_2 {
            font-size: 41px;
            margin-left: 10px;
          }
        }
      }
      .price {
        display: flex;
        align-items: baseline;
        margin-top: 25px;
        color: #53290b;
        .text_3 {
          font-size: 60px;
          font-weight: bold;
          margin-right: 20px;
        }
        .price_num {
          font-size: 85px;
          font-weight: bold;
          letter-spacing: 6px;
        }
      }
    }
    .isVip {
      background-image: url("https://zxcxappimg.cxbtv.cn/qinghai/2025/08/08/98be476d7dc3c4586664c1223d464bd4.png");
      height: 500px;
      position: relative;
      .user_info {
        display: flex;
        align-items: center;
        .avatar {
          position: relative;
          .vip_tag {
            position: absolute;
            bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 42px;
            padding: 0 40px;
            font-size: 32px;
            color: #3c3c3c;
            background: #ddb183;
            line-height: 100%;
            border-radius: 21px;
          }
        }
        .user_name {
          margin-left: 60px;
          font-size: 67px;
          color: #3c3c3c;
        }
      }
      .vip_time {
        position: absolute;
        bottom: 30px;
        font-weight: bold;
        font-size: 42px;
        color: #3c3c3c;
      }
    }
    .mask {
      position: absolute;
      bottom: -150px;
      left: -60px;
      right: -60px;
      height: 383px;
      background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/66ce48555fd640afa9c1bbed9285d432.png")
      no-repeat;
      background-size: contain;
      background-position: top center;
    }
  }
  .vip_power {
    padding-top: 120px;
    .power_title {
      font-size: 56px;
      color: #fff;
      font-weight: bold;
      text-align: center;
    }
    .power_icon {
      padding: 25px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      &_item {
        width: 15%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        margin: 20px 25px;
        .pic {
          height: 128px;
          width: 128px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(to bottom, #ca9c79, #fbe8d7);
          .pic_icon {
            width: 74px;
            height: 74px;
          }
        }
        .label {
          font-size: 34px;
          color: #fde8d6;
          margin-top: 20px;
          white-space: nowrap;
        }
        .disable {
          color: transparent;
        }
      }
    }
  }
  .choujiang {
    padding-top: 60px;
    .t2 {
      letter-spacing: 3px;
    }
    .choujiang_box {
      margin-top: 30px;
      width: 100%;
      aspect-ratio: 1;
      background-image: url("@/assets/vip/cjbg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .wheel_content {
        width: 100%;
        height: 100%;
        padding: 140px;
      }
    }
    .roules {
      margin-top: 30px;
      padding: 20px 90px 0 90px;
      &_title {
        font-size: 47px;
        color: #fff;
      }
      p {
        font-size: 36px;
        color: #fae4d0;
        text-align: justify;
        padding: 5px 0;
        letter-spacing: 1px;
      }
      .first_p {
        margin-top: 30px;
      }
    }
  }
  .store {
    margin-top: 30px;
    margin-left: -60px;
    margin-right: -60px;
    padding: 60px;
    background: #fff0e3;
    border-radius: 30px 30px 0 0;
    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .label {
        font-size: 52px;
      }
      .all {
        font-size: 40px;
        color: #4c4c4c;
      }
    }
    .list {
      margin-top: 40px;
      padding-top: 20px;
      padding-bottom: 100px;
      background: #fff;
      border-radius: 30px 30px 0 0;
    }
  }
  .bottom {
    position: fixed;
    bottom: 150px;
    left: 0;
    right: 0;
    height: 300px;
    background: #fdead9;
    border-radius: 100px 100px 0 0;
    box-shadow: 0 -5px 10px -5px rgba(0, 0, 0, 0.3);
    padding: 60px 70px 35px 70px;
    .btn_outside {
      width: 100%;
      height: 150px;
      background: #b58f70;
      border-radius: 75px;
      .btn_inside {
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, #d8a75f, #f8d7a8);
        border-radius: 75px;
        transform: translateY(-15px);
        display: flex;
        align-items: center;
        .left {
          width: 60%;
          height: 100%;
          border-radius: 75px 0 150px 75px;
          background: linear-gradient(to bottom, #010000, #71350a);
          text-align: center;
          line-height: 1;
          .text_1 {
            font-size: 60px;
            color: #f8ddc5;
            font-weight: bold;
          }
          .text_2 {
            font-size: 80px;
            color: #f8ddc5;
            font-weight: bold;
          }
        }
        .right {
          width: 40%;
          height: 100%;
          text-align: center;
          line-height: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          .text_3 {
            font-size: 60px;
            color: #432006;
            font-weight: bold;
          }
        }
      }
    }
  }
  .rules_content {
    width: 100%;
    height: 80vh;
    position: relative;
    .close {
      position: absolute;
      right: 0.5rem;
      top: 0.5rem;
      font-size: 18px;
    }
    .rules_imgs {
      display: flex;
      flex-direction: column;
      justify-content: center;
      img {
        font-size: 0;
        line-height: 1;
      }
    }
  }
  :deep(.van-dialog) {
    background: transparent;
    .pic {
      position: relative;
      .gift_result {
        position: absolute;
        top: 33%;
        left: 50%;
        transform: translateX(-50%);
        p {
          font-size: 65px;
          color: #b31801;
          font-weight: bold;
          text-align: center;
        }
      }
    }
  }
}
</style>
